<!DOCTYPE html>
<html>
<head>
    <title>消息提示弹窗</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="../../themes/bootstrap/cetc54.ui.all.css">

</head>
<body>

<button type="button" class="button" onclick="showMsg('left','top');">左上</button>
<button type="button" class="button" onclick="showMsg('center','top');">中上</button>
<button type="button" class="button" onclick="showMsg('right','top');">右上</button>

<button type="button" class="button" onclick="showMsg('left','center');">左中</button>
<button type="button" class="button" onclick="showMsg('center','center');">中中</button>
<button type="button" class="button" onclick="showMsg('right','center');">右中</button>

<button type="button" class="button" onclick="showMsg('left','bottom');">左下</button>
<button type="button" class="button" onclick="showMsg('center','bottom');">中下</button>
<button type="button" class="button" onclick="showMsg('right','bottom');">右下</button>
<p>回调次数:<span style="font-weight: bold;color: red;" id="div">0</span></p>
<div id="container" style="width: 500px;height: 300px;border: 1px solid #000000;overflow: scroll;">
    <p>ddfdf</p><p>ddfdf</p><p>ddfdf</p><p>ddfdf</p><p>ddfdf</p><p>ddfdf</p><p>ddfdf</p><p>ddfdf</p><p>ddfdf</p><p>ddfdf</p><p>ddfdf</p><p>ddfdf</p><p>ddfdf</p><p>ddfdf</p>
</div>
</body>
<script type="text/javascript" src="../../lib/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../../release/cetc54.ui.all.js"></script>
<script>
    function showMsg(horizontal, vertical) {
        $.uiMessagetip.show({
                    animate:true,
                    container: $('#container'), title: '消息提醒',
                    content: '您有1条短信息，请注意查收！',
                    vertical: vertical,
                    horizontal: horizontal,
                    timeout:2000,
                    onClose: function () {
                        var count=$('#div');
                        count.text(parseInt(count.text())+1);
                    }
                }
        );
    }
</script>
</html>